<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#up, #down{
				width: 200px;
				height: 200px;
				background: pink;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<!-- 
		属于同一个BFC的两个相邻Box的margin会发生重叠 这里的margin重叠了 
		加上<div style="overflow: hidden;">之前 up 和 down 两个元素属于根元素html的bfc
		加上<div style="overflow: hidden;">之后，这两个元素不再处于同一个bfc
		
		取消重叠的另一个方法
		up和down之间添加<br/>标签，br的高度是21px
		
		或者添加一个 <div style="border: 1px;"></div>
		-->
		<div id="up">
			up
		</div>
		
		<!-- 这里开启另一个bfc -->
		<div style="overflow: hidden;">
			<div id="down">
				down
			</div>
		</div>		
	</body>
</html>
